<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">

    <ui:composition template="layout.xhtml">

        <ui:define name="body">
            <script  type="text/javascript" src="media/js/autoNumeric.js"></script>

            <div class="section">
                <h1>Reserva de Lote</h1>
                <h:form id="reserveForm">
                    <p:growl id="msg"  life="3000"/>

                    <div class="container_24 clearfix">

                        <div class="clear" />
                        <p:panel header="Lote" styleClass="grid_24 clearfix " >

                            <p:outputLabel value="Empreendimento:" for="enterpriseAutocomplete" styleClass="grid_4 enterpriseLabel" />
                            <p:autoComplete styleClass="grid_18" required="true" requiredMessage="Empreendimento é obrigatório."  value="#{managerReserve.enterprise}" id="enterpriseAutocomplete" completeMethod="#{managerReserve.autocompleteEnterprise}"  
                                            var="p" dropdown="true" itemLabel="#{p.name}" itemValue="#{p}" converter="#{autocompleteconverter}" forceSelection="true">
                                <p:ajax event="itemSelect" process="@this" update=":reserveForm:blockAutocomplete, :reserveForm:lotAutocomplete"  />
                            </p:autoComplete>
                            <div class="clear-both"/>

                            <p:outputLabel value="Quadra:" styleClass="grid_4" for="blockAutocomplete" />
                            <div class="grid_6">
                                <p:selectOneMenu id="blockAutocomplete" required="true" requiredMessage="Quadra é obrigatório."  styleClass="alpha" value="#{managerReserve.block}" >  
                                    <f:selectItem itemLabel="" itemValue="" />  
                                    <f:selectItems value="#{managerReserve.selectTypeBlock()}" /> 
                                    <p:ajax update="lotAutocomplete" process="@this"  />
                                </p:selectOneMenu> 
                            </div>

                            <p:outputLabel value="Lote:" styleClass="grid_4" for="lotAutocomplete" />
                            <div class="grid_8">
                                <p:selectOneMenu id="lotAutocomplete"  required="true" requiredMessage="Lote é obrigatório."  value="#{managerReserve.lot.id}" >  
                                    <f:selectItem itemLabel="" itemValue="" />  
                                    <f:selectItems value="#{managerReserve.lotsByEnterpriseAndBlock()}" /> 
                                    <p:ajax update="info" listener="#{managerReserve.loadLot()}"  />
                                </p:selectOneMenu> 
                            </div>
                            <div class="clear"/>
                            <p:outputLabel value="Corretor:" styleClass="grid_4 enterpriseLabel" for="correctorAutocomplete" />
                            <p:autoComplete styleClass="#{managerReserve.isCorrector ? 'grid_13' : 'grid_18'}" disabled="#{managerReserve.usesCurrentUser}" value="#{managerReserve.corrector}" id="correctorAutocomplete" completeMethod="#{managerReserve.autocompleteCorrector}"  
                                            var="p" dropdown="true" itemLabel="#{p.name}" itemValue="#{p}" 
                                            required="true" requiredMessage="Corretor é obrigatório."
                                            converter="#{autocompleteconverter}" forceSelection="true">
                                <p:ajax event="itemSelect"  />
                            </p:autoComplete>

                            <p:selectBooleanCheckbox itemLabel="Utilizar corretor atual" value="#{managerReserve.usesCurrentUser}" styleClass="selectUserActual" style="margin-left: 30px; margin-top: 5px" rendered="#{managerReserve.isCorrector}">  
                                <p:ajax update="correctorAutocomplete" process="@this" listener="#{managerReserve.loadCorrector()}"/>  
                            </p:selectBooleanCheckbox>  
                            <div class="clear"/>


                            <p:panel id="info" header="Informações sobre o Lote" styleClass="grid_24 clearfix " >
                                <div class="labelsInfo">
                                    <div class="clear"/>
                                    <p:outputLabel value="Nº do Lote: " styleClass="grid_6 fieldValue" />
                                    <p:outputLabel value="#{managerReserve.lot.num}" />
                                    <div class="clear"/>
                                    <p:outputLabel value="Dimensão: " styleClass="grid_6 fieldValue" />
                                    <p:outputLabel value="#{managerReserve.dimensaoDoLote()}" />
                                    <div class="clear"/>
                                    <p:outputLabel value="Área: " styleClass="grid_6 fieldValue" />
                                    <p:outputLabel value="#{managerReserve.lot.area}" />
                                    <div class="clear"/>
                                    <p:outputLabel value="Tipo: " styleClass="grid_6 fieldValue" />
                                    <p:outputLabel value="#{managerReserve.lot.typeLot.name}" />
                                </div>
                                <div id="infoMap" >
                                    <div class="grid_7">
<!--                                        <p:gmap center="#{managerEnterprise.centerMap}" id="gmapInfo"
                                                zoom="18" type="HYBRID" 
                                                style="width:300px;height:200px" model="#{managerEnterprise.polygonModel}">

                                        </p:gmap>-->
                                    </div>
                                </div>
                            </p:panel>
                            <div class="clear"/>
                            <div class="buttonAction">
                                <p:commandButton value="Reservar" 
                                                 action="#{managerReserve.reserve()}"
                                                 update="@form"
                                                 process="@form"
                                                 icon="ui-icon-disk" 
                                                 />
                                <p:button href="indexsale.xhtml" value="Cancelar" icon="ui-icon-close"  />
                            </div>

                        </p:panel>

                    </div>

                </h:form>
            </div>
        </ui:define>
    </ui:composition>
</html>
